<template>
  <view class="">
    <nav-bar show-model :query.sync="query" @reset="listInit" />

    <view class="bg-white">
      <view v-if="query.model === 1" class="p-15 ">
        <view v-for="item in list" :key="item.id" class="flex goods-gap" @click="goDetail(item.id, 'goods')">
          <image class="goods-logo" :src="item.logo" />
          <view class="flex-1 flex-vb">
            <view class="leading-20 ellipsis-2">{{ item.name }}</view>
            <view class="text-error">
              <text class="text-12">￥</text><text class="text-16">
                {{ item.price }}
              </text>
            </view>
          </view>
        </view>
      </view>
      <view v-else class="px-15">
        <view v-for="item in list" :key="item.id" class="flex py-15 hair--b" @click="goDetail(item.id, 'file')">
          <view class="file-logo flex-ca text-12">{{ item.format }}</view>
          <view class="flex-1 leading-20 ellipsis-2">
            {{ item.name }}
          </view>
        </view>
      </view>
    </view>
    <uni-load-more :status="$f.getLoading(loading)" />
  </view>
</template>

<script>
import NavBar from '@/components/NavBar.vue'
export default {
  components: {
    NavBar
  },
  data() {
    return {
      free: 0,
      list: [],
      page: 1,
      loading: 0,
      limit: 10,
      query: {}
    }
  },
  watch: {
    query: {
      handler(val) {
        this.listInit()
      },
      deep: true
    }
  },
  onReachBottom() {
    this.getList()
  },
  onShareAppMessage() {
    return this.$f.wxShare()
  },
  onShareTimeline() {
    return this.$f.wxShare()
  },
  onLoad(options = {}) {
    this.free = options.free ? Number(options.free) : 0
    this.query = {
      model: options.model ? Number(options.model) : 2, // 2是文档 1是商品
      fcId: options.fcId ? Number(options.fcId) : 0, // 文档分类id
      gcId: options.gcId ? Number(options.gcId) : 0, // 商品分类id
      sort: options.sort ? options.sort.trim() : '',
      format: options.format ? options.format.trim() : '',
      keyword: options.keyword ? options.keyword.trim() : ''
    }
  },
  methods: {
    goDetail(id, type = '') {
      this.$Router.push(`/pages/detail/${type}?id=${id}`)
    },
    listInit() {
      this.list = []
      this.page = 1
      this.loading = 0
      this.getList()
    },
    getList() {
      if (this.loading) return
      this.loading = 1
			const query = {
				keyword: this.keyword,
				sort: this.query,
			}
			let api = ''
			if (this.query.model === 1) {
				api = 'api/comboList'
				query.id = this.query.gcId
			} else {
				api = 'api/cateFileList'
				query.id = this.query.fcId
				query.format = this.format
			}
      const param = {
        ...query,
        free: this.free,
        page: this.page,
        limit: this.limit
      }
      this.$f.post(api, param).then(res => {
        this.loading = this.limit > res.data.length ? 2 : 0
        if (res.data.length) {
          this.list = [...this.list, ...res.data]
          this.page += 1
        }
      })
    }
  }
}
</script>

<style lang="scss">
	.pb-0 {
		padding-bottom: 0;
	}

	.goods-gap+.goods-gap {
		margin-top: 32rpx;
	}

	.file-logo {
		width: 80rpx;
		height: 80rpx;
		margin-right: 16rpx;
		background-color: #E7ECF2;
	}

	.goods-logo {
		width: 240rpx;
		height: 136rpx;
		margin-right: 16rpx;
		border-radius: 12rpx;
	}
</style>
